<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
    <link href="grouping.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      .grouping--non-existing-group {
        border-color: orange;
      }

      .grouping--non-existing-group::after {
        background-color: orange;
        bottom: -2px;
        color: white;
        content: 'Non-existent';
        right: -2px;
        top: unset;
      }
    </style>
  </head>

  <body>
    <main id="webchat"></main>
    <script type="module">
      run(async function () {
        const {
          React: { createElement },
          WebChat: {
            decorator: { createActivityGroupingMiddleware },
            renderWebChat
          }
        } = window; // Imports in UMD fashion.

        const clock = lolex.createClock();

        const { directLine, store } = testHelpers.createDirectLineEmulator({ ponyfill: clock });

        // WHEN: All groups are removed.
        const groupActivitiesMiddleware = () => next => request => ({});

        const decoratorMiddleware = [
          createActivityGroupingMiddleware(next => request => {
            const DownstreamComponent = next(request);

            if (request.groupingName) {
              return ({ activities, children }) =>
                createElement(
                  'div',
                  { className: `grouping grouping--${request.groupingName}` },
                  createElement(DownstreamComponent, { activities }, children)
                );
            }

            return DownstreamComponent;
          })
        ];

        renderWebChat(
          {
            decoratorMiddleware,
            directLine,
            groupActivitiesMiddleware,
            ponyfill: clock,
            store,
            styleOptions: {
              botAvatarBackgroundColor: 'black',
              botAvatarInitials: 'WC',
              groupActivitiesBy: ['sender', 'status', 'non-existing-group'],
              groupTimestamp: 30_000,
              userAvatarBackgroundColor: 'black',
              userAvatarInitials: 'WW'
            }
          },
          document.getElementById('webchat')
        );

        await pageConditions.webChatRendered();

        clock.tick(600);

        await pageConditions.uiConnected();

        for (let index = 0; index < 5; index++) {
          await directLine.emulateIncomingActivity({
            from: { id: 'bot', role: 'bot' },
            text: `Bot ${index + 1}: t=${(clock.Date.now() - 600) / 1_000}s`,
            type: 'message'
          });

          clock.tick(10_000);
        }

        // THEN: All activities should render as in their own group.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
